<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				perspective: 800px;
				perspective-origin: 50% -20%;
			}			
			#box{
				width: 800px;
				height: 800px;
				border: 1px solid red;
				background:rgba(255,0,0,0);
				margin: 20px auto;
				transform-style: preserve-3d;
				animation: hd 20s linear infinite;
			}
			@-webkit-keyframes hd{
				from{transform: rotateY(0deg);}
				to{transform: rotateY(360deg);}
			}
			p{
				width: 300px;
				height: 300px;
				line-height: 300px;
				margin-left: -150px;
				margin-top: -150px;
				text-align: center;
				position: absolute;
				top: 50%;left: 50%;
				color: white;
			}
			#zheng{
				background: darkblue;
				transform: translateZ(150px);
			}
			#dui{
				background: darkcyan;
				transform: translateZ(-150px);
			}
			#shang{
				background: darkmagenta;
				transform: translateZ(150px) rotateX(-90deg);
				
				transform-origin: top;
			}
			#xia{
				background: darkgrey;
				transform: translateZ(150px) rotateX(90deg);
				
				transform-origin: bottom;
			}
			#zuo{
				background: darkorange;
				transform: translateZ(150px) rotateY(90deg);
				transform-origin: left;
			}
			#you{
				background: mediumaquamarine;
				transform: translateZ(150px) rotateY(-90deg);
				transform-origin: right;	
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p id="zheng">正面</p>
			<p id="dui">对面</p>
			<p id="shang">上面</p>
			<p id="xia">下面</p>
			<p id="zuo">左面</p>
			<p id="you">右面</p>
		</div>
	</body>
</html>
